<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
</head>
<style>
    .layui-table-page {
        text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }

    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<!--数据表格样式及附件-->
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="toUpdate">
        <i class="layui-icon">&#xe6b2;</i>修改
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
</script>

<!--头工具栏-->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button id="add" class="layui-btn layui-btn-sm">添加班级</button>
    </div>
</script>

<!--搜索栏-->
<form class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label" style="width: 100px">班级名称</label>
        <div class="layui-input-block">
            <input type="text"  id="classname" name="classname" autocomplete="off" class="layui-input">
<!--            <select id="classname" name="classname" style="height: 35px;width: 120px;">-->
<!--                <option value="">请选择班级</option>-->
<!--                <option th:each="sc:${studentclasse}" th:value="${sc.classname}" th:text="${sc.classname}"></option>-->
<!--            </select>-->
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label" style="width: 90px">系名称</label>
        <div class="layui-input-block">
            <select id="deptid" name="deptid" style="height: 35px;width: 120px;">
                <option value="">请选择系</option>
                <option th:each="d:${dept}" th:value="${d.deptid}" th:text="${d.deptname}"></option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <button type="button" id="ck" class="layui-btn layui-btn-normal"><i class="fa fa-spin fa-refresh"></i> 查找</button>
    </div>
</form>

<!--数据表格  数据表格使用的是方法渲染-->
<div class="utable">
    <table class="layui-table"
           lay-data="{width:1150,height:500, url:'/studentClass/data', page:true, id:'tab',toolbar: '#toolbarDemo'}"
           lay-filter="tab">
        <thead>
        <tr>
            <th lay-data="{field:'classid', width:80, sort: true}">编号</th>
            <th lay-data="{field:'className'}">班级名称</th>
            <th lay-data="{field:'classtypename'}">班级类别</th>
            <th lay-data="{field:'empname1', sort: true, edit: 'false'}">班主任</th>
            <th lay-data="{field:'empname2', sort: true, edit: 'false'}">授课老师</th>
            <th lay-data="{field:'count', sort: true, edit: 'false'}">班级人数</th>
            <th lay-data="{field:'majorName'}">专业</th>
            <th lay-data="{field:'remark', edit: 'false'}">说明</th>
            <th lay-data="{fixed: 'right', title:'操作', toolbar: '#bar', width:250}"></th>
        </tr>
        </thead>
    </table>
</div>
</body>
<script th:src="@{/js/register/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">

    layui.use('table', function () {
        var table = layui.table;

        //模糊
        $("#ck").on('click',function(){
            var classname=$("#classname").val();
            var deptid=$("#deptid").val();
            table.reload('tab', {
                where: { //设定异步数据接口的额外参数，任意设
                    classname:classname,
                    deptid:deptid
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });


        });

        //点击添加iframe窗方法(添加)
        $("#add").on('click',function(){
            layer.open({
                type: 2,
                title: '新增班级',
                maxmin: true, //开启最大化最小化按钮
                area: ['700px', '370px'],
                content: ['/studentClass/toadd']//这是链接你的页面地址 url
            });
        });

        //监听行工具事件
        table.on('tool(tab)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除么?', function (index) {

                    $.ajax({
                        url: '/studentClass/del',
                        type: 'post',
                        data: {
                            id:data.classid
                        },
                        dataType: 'json',
                        success:function(data){
                            if(data){
                                obj.del();
                                layer.close(index);
                                layer.msg(JSON.stringify("删除成功"));
                            }else {
                                layer.msg('该班级已有人', { icon: 5, time: 2000 });
                            }
                        },
                    })
                });
            } else if(obj.event= 'toUpdate'){
                // alert(data.classid);
                layer.open({
                    type: 2,
                    title: '修改班级',
                    maxmin: true, //开启最大化最小化按钮
                    area: ['700px', '370px'],
                    content: ['/studentClass/toUpdate?id='+data.classid]//这是链接你的页面地址 url
                });
            }
        })
    });
</script>
</html>